﻿<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin: 30px auto;
  width: 640px;
  position: relative;
}

header {
  padding: 6px 0;
}

.group {
  margin-bottom: 1em;
}

.axis {
  font: 10px sans-serif;
  position: fixed;
  pointer-events: none;
  z-index: 2;
}

.axis text {
  -webkit-transition: fill-opacity 250ms linear;
}

.axis path {
  display: none;
}

.axis line {
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis.top {
  background-image: linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -o-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -moz-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -webkit-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -ms-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
  top: 0px;
  padding: 0 0 24px 0;
}

.axis.bottom {
  background-image: linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -o-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -moz-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -webkit-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
  background-image: -ms-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
  bottom: 0px;
  padding: 24px 0 0 0;
}

.horizon {
  border-bottom: solid 1px #000;
  overflow: hidden;
  position: relative;
}

.horizon {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}

.horizon + .horizon {
  border-top: none;
}

.horizon canvas {
  display: block;
}

.horizon .title,
.horizon .value {
  bottom: 0;
  line-height: 30px;
  margin: 0 6px;
  position: absolute;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  white-space: nowrap;
}

.horizon .title {
  left: 0;
}

.horizon .value {
  right: 0;
}

.line {
  background: #000;
  z-index: 2;
}

</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="horizon.js?0.0.1"></script>
<script src="cubism.v1.js?1.0.0"></script>

<body id="demo">
<!-- <div id="chartsDiv" style="margin-top: 300px"></div> -->

<script>
	var width = 640, height = 30;

	var nProc = 4;
	var marginCharts = 2;

	//createCharts(nProc);

	function createCharts(nProc) {
		var i = 0;
		for (i =0 ; i < nProc; i++) {
			d3.csv("data/" + i + ".csv")
			    .row(function(d) { return [+d.Time, +d.Rate]; })
				.get(function(error, rows) {
					var chart = d3.horizon()
						.width(width)
						.height(height)
						.bands(2)
						.mode("mirror");
					var svg = d3.select("#chartsDiv").append("svg")
						.attr("width", width)
						.attr("height", height)
						.style("margin-top", marginCharts);
					svg.data([rows]).call(chart);
				}
			);
		}
	}
	// The above code creates the horizon charts
	// The following code creates a cubism chart
	
var context = cubism.context()
    .serverDelay( Date.now()-99000)
	//.clientDelay(Date.now()-95000)
    .step(100000/640)  // 640 pixels, 10 seconds, each pixels, 10/640 seconds
    .size(640)
    .stop();

d3.select("#demo").selectAll(".axis")
	//.tickFormat(d3.format(",.0f"))
    .data(["top", "bottom"])
  .enter().append("div")
    .attr("class", function(d) { return d + " axis"; })
    .each(function(d) { d3.select(this).call(context.axis().ticks(6).orient(d).tickFormat(d3.format(",.0f"))); });

d3.select("body").append("div")
    .attr("class", "rule")
    .call(context.rule());

d3.select("body").selectAll(".horizon")
    .data(["0", "1", "2", "3"].map(iorate))
  .enter().insert("div", ".bottom")
    .attr("class", "horizon")
  .call(context.horizon()
    .format(d3.format("+,.2"))
	.extent([0,75]));

context.on("focus", function(i) {
  d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});

function iorate(name) {
  return context.metric(function(start, stop, step, callback) {
    d3.csv("data/" + name + ".csv", function(rows) {
        rows = rows.map(function(d) { return [+d.Time, +d.Rate]; }); 
	    //console.log(rows);
	    var second = rows[0][0], value = rows[0][1], values = [value];
	    rows.forEach( function(d) {
			while ((++second) < d[0]) {
			    //console.log("#   " + value);
			    //console.log("d[1]: " + d[1]);
			    values.push(value);
		    }
			value = d[1];
			//console.log("*" + value);
			values.push(d[1]);
		});
        callback(null, values.slice(-context.size()));
		  
    });
  }, name);
}

</script>
</body>
